const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

// const devMode = process.env.NODE_ENV !== "production"

// console.log(devMode, 3333333333333333333333)

module.exports = {
  entry: "./src/main.ts", // 入口文件
  output: {
    filename: "bundle.js", // 输出文件名
    path: path.resolve(__dirname, "dist"), // 输出目录
    // environment: {
    //   arrowFunction: false,
    //   const: false
    // },
    clean: true // 清理输出目录
  },
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true // 是否自动打开浏览器
  },
  resolve: {
    extensions: [".ts", ".js", ".json", ".less"], // 解析文件扩展名
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
  module: {
    rules: [
      {
        test: /\.ts$/, // 匹配 .ts 文件
        // use: "ts-loader", // 使用 ts-loader
        use: ["babel-loader", "ts-loader"],
        exclude: /node_modules/ // 排除 node_modules
      },
      {
        test: /\.less$/, // 匹配 LESS 文件
        use: [
          //   "style-loader", // 将 CSS 插入到 DOM 中
          //   devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          MiniCssExtractPlugin.loader,
          "css-loader", // 处理 CSS 文件
          "postcss-loader", // 通过 PostCSS 处理 CSS 文件
          "less-loader" // 处理 LESS 文件，转为 CSS
        ]
      }
    ]
  },
  //   devtool: "source-map", // 生成 source map 方便调试
  //   mode: "development", // 或 'production'
  //   mode: "production", // 或 'production'
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html"
    }),
    new MiniCssExtractPlugin({})
  ]
}
